<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#2f81f1"
    text-color="#ffffff"
    active-text-color="#ffffff"
    :select="select"
  >
    <div class="logg">
      <router-link :to="{name:'myclass'}">
        <img
          width="115"
          src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/logo/logo_.png"
          alt="BV"
        >
      </router-link>
    </div>
    <div class="tuu">
      <img src="https://cnd.hterobot.com/vue/public/guanwang/home/line.png" class="rule">
    </div>
    <!-- <el-menu-item index="9" class=" brand1">
      <img src="https://cnd.hterobot.com/vue/public/guanwang/home/line.png" alt="FG" class="rule">
    </el-menu-item>-->
    <el-menu-item index="myclass" class="brand brand2" @click="$router.push({name:'myclass'})">
      <router-link :to="{name:'myclass'}">我的课堂</router-link>
    </el-menu-item>
    <el-menu-item index="allclass" class="brand brand2" @click="$router.push({name:'allclass'})">
      <router-link :to="{name:'allclass'}">精品课堂</router-link>
    </el-menu-item>
    <el-menu-item index="4" class="brand brand2">
      <a href="/forum.html">学习论坛</a>
    </el-menu-item>
    <el-menu-item index="3" class="brand brand2">
      <a href="/Uploadwork.html">作品分享</a>
    </el-menu-item>

    <el-submenu index="2" popper-class="ffaa" class="brand brand2">
      <template slot="title">开始编程</template>
      <el-menu-item index="2-1">
        <a
          class="chead Scratchul"
          href="https://cdn.hterobot.com/scratch/index.html"
          target="_blank"
        >Scratch</a>
      </el-menu-item>
    </el-submenu>
    <b-navbar-nav v-if="user" class="gauge text-right">
      <div slot="content">
        <span class="chead same" href="#">
          <i style="font-size: 24px;" class="icon-xinxi icon iconfont"></i>
        </span>&nbsp; &nbsp;
        <router-link class="chead" :to="{name:'secure'}">
          <el-tooltip placement="bottom-end" popper-class="backg">
            <span class="cursor" slot="content">
              用户名： {{user.username}}
              <span
                class="cursors"
                @click="$router.push('/logout')"
              >
                <i class="iconfont icon-tuichu"></i>&nbsp;&nbsp; 退出
              </span>
            </span>
            <img :src="user.headimg" width="30" height="30" class="rounded-circle" alt="BV">
          </el-tooltip>
        </router-link>
      </div>
    </b-navbar-nav>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeIndex: "allclass"
    };
  },
  computed: mapState(["user"]),
  mounted() {
    this.activeIndex = this.$route.name;
  },
  watch: {
    $route(v) {
      this.activeIndex = v.name;
    }
  },
  methods: {
    logout() {
      this.$router.push("/logout");
    },
    select(v, i) {
      console.log(v, i);
    }
  }
};
</script>



<style scoped>
.cursors{
  float: right;
}
.rule {
  margin-left: 20px;
  margin-top: 15px;
}
.logg {
  width: 115px;
  height: 60px;
  float: left;
  line-height: 63px;
}
.tuu {
  width: 41px;
  height: 60px;
  float: left;
  margin-left: 15px;
  margin-right: 15px;
}
.chead {
  color: #ffffff;
}
.rounded-circle {
  margin-bottom: 10px;
  margin-right: 15px;
}
@media screen and (max-width: 1200px) {
  .ml-auto {
    display: none;
  }
}

.brand a {
  line-height: 60px;
}
.brand1:hover {
  background: #2f81f1 !important;
}
.brand2:hover {
  background: #2f81f1 !important;
  border-bottom: 2px solid #fff !important;
}
.title1 {
  font-size: 24px;
  color: #1c262f;
  font-family: MicrosoftYaHei;
  letter-spacing: 2px;
  font-weight: normal;
  font-stretch: normal;
}
/*以下改动*/
.nav-link {
  height: 40px;
  text-align: right;
  line-height: 22px;
  margin-left: 45px;
  color: #1c262f;
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
}
.gauge {
  margin-right: 39px;
  height: 75px;
  line-height: 75px;
  font-size: 18px;
}
.same {
  line-height: 29px;
}
.Scratchul {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.cursor {
  cursor: pointer;
  font-size: 16px;
}
</style>
